<template>
	<view class="page bg-fff">
		<block v-if="tabsList.length > 0">
			<up-tabs keyName="title" :list="tabsList" :current="currentTab" lineColor="#007235" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" @click="clickTabs"></up-tabs>
			<view class="productListWrap">
				<view class="productItemWrap" v-for="item in tabsList[currentTab].list" :key="item.id">
					<rengou-item :prod="item"></rengou-item>
				</view>
				<up-loadmore :status="tabsList[currentTab].loadingType" v-if="tabsList[currentTab].list.length > 0" />
			</view>
		</block>
		<up-empty mode="search" v-if="tabsList[currentTab]?.list.length === 0"></up-empty>
	</view>
</template>

<script setup>
	import RengouItem from './components/ren-gou-item.vue';
	import { ref } from 'vue';
	import { useUserInfoStore, useIndexStore } from '@/store/index';
    import { isDuringDate } from '@/common/common';
	import { onLoad, onReachBottom, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    import { rengouPiCiAPI, loadRengouProducts } from '@/common/api/houses';

	const userInfoStore = useUserInfoStore();
	const indexStore = useIndexStore();
	let activeStyle = ref({
		color: '#007235',
		fontWeight: 'bold',
		fontSize: '28rpx'
	});
	let inactiveStyle = {
		color: '#8A8A8A',
		fontSize: '28rpx'
	}
	let currentTab = ref(0);
	let tabsList = ref([]);

	onLoad((options) => {
		if(options.puid){
			userInfoStore.setPuid(options.puid)
		}
		init();
	});

	onReachBottom(() => {
		loadData();
	});

	onShareAppMessage(() => {
		return {
			title: '认购监测',
			path: `/pages/products/rengou-jiance/index?puid=${userInfoStore.userInfo.id}`,
		}
	});

	onShareTimeline(() => {
		return {
			title: '认购监测',
			path: `/pages/products/rengou-jiance/index?puid=${userInfoStore.userInfo.id}`,
		}
	});

	// 初始化
	async function init(){
		try{
			let piciRes = await rengouPiCiAPI(indexStore.nowCityCode);
			if(piciRes.status !== 0) {
				uni.$u.toast(piciRes.detail);
				return;
			}
			tabsList.value = piciRes.detail.map(item => ({
				...item,
				list: [],
				next: '',
				loadingType: 'loadMore'
			}));
		}catch(err){
			console.log(err);
		}
		await loadData();
	}

	// 获取数据
	async function loadData() {
		let currTabObj = tabsList.value[currentTab.value];
		if (currTabObj.loadingType === 'loading' || currTabObj.loadingType === 'nomore') return;
		currTabObj.loadingType = 'loading';
		let url = (currTabObj.next == '' || currTabObj.list.length == 0) ? `/product/mall/v6/gou?pc=${currTabObj.value}&city=${indexStore.nowCityCode}` : currTabObj.next;
		try{
			let {status, detail} = await loadRengouProducts(url);
			if(status !== 0){
				uni.$u.toast(detail);
				return;
			}
			let { results, next } = detail;
			results.forEach(item=>{
				currTabObj.list.push({
					...item,
					currDate: isDuringDate(item.pan.buy_start_time, item.pan.buy_end_time)
				})
			})
			currTabObj.next = next;
			currTabObj.loadingType = next ? 'loadmore' : 'nomore';
		}catch(err){
			console.log(err);
			uni.stopPullDownRefresh();
		}
	}

	// 点击tab
	async function clickTabs({index}) {
		currentTab.value = index;
		await loadData();
	}
</script>

<style lang="scss">
	.page{
		min-height: 100vh;
	}
</style>
